<template>
	<CustomNavbar>
		<view class="navbar-content">
			<!-- 左侧返回按钮 -->
			<image src="/static/index/消息中心.png" mode="" style="width: 35rpx; height: 35rpx;" @click="goToMessage">
			</image>
			<!-- 中间标题 -->
			<view class="nav-title">首页</view>
		</view>
	</CustomNavbar>

	<view class="container">
		<!-- 地址栏 -->

		<view class="address-bar">
			<view class="address-inner">
				<view class="search-input-wrapper">
					<!-- 前缀图标 -->
					<view class="input-prefix">
						<image src="/static/index/@2x_home.png" mode="aspectFit" class="input-icon" />
					</view>
					<!-- 输入框 -->
					<u-input v-model="addressValue" placeholder=" 焦作市山阳区人民路32号" placeholder-style="color: #999"
						class="search-input" :clearable="false"></u-input>
					<!-- 后缀刷新按钮 -->
					<view class="input-suffix">
						<view class="refresh-wrap" @click="refreshLocation">
							<image src="/static/index/刷新 (1)@2x.png" mode="aspectFit" class="input-icon" />
							<text class="refresh-text">刷新</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 功能导航栏（点击 item 跳转，而非 index） -->
		<view class="nav-list">
			<view class="nav-item" v-for="(item, index) in navList" :key="index" @click="handleNavClick(item)">
				<view class="nav-icon-wrap" :class="'nav-color-'+index">
					<image :src="item.icon" class="nav-icon" mode="aspectFit" />
				</view>
				<text class="nav-text">{{ item.text }}</text>
			</view>
		</view>

		<!-- 附近加油站 -->
		<view class="station-section">
			<view class="section-header">
				<view class="section-text-group">
					<text class="section-title">附近加油站</text>
					<text class="section-desc">根据您的位置推荐最近的加油站</text>
				</view>
				<view class="section-more" @click="viewAllStations">更多</view>
			</view>
			<!-- 地图 -->
			<view class="dtmk" @click="viewAllStations">
				<!-- <map class="dt" name="" :latitude="latitude" :longitude="longitude"></map> -->
				<map class="dt" :latitude="latitude" :longitude="longitude" :markers="markers" scale="16"
					show-location></map>
			</view>
		</view>

		<!-- 优惠团购 -->
		<view class="group-section">
			<view class="section-header">
				<view class="section-text-group">
					<text class="section-title">优惠团购</text>
					<text class="section-desc">钜惠袭来 为您的爱车续航</text>
				</view>
				<view class="section-more" @click="viewMoreGroups">更多</view>
			</view>
			<view class="group-list">
				<view class="group-item" v-for="(item, index) in groupList" :key="index"
					@click="goToDiscountDetail(item)">
					<image :src="item.image" class="group-image" mode="aspectFill" />
					<text class="group-title">{{ item.title }}</text>
				</view>
			</view>
		</view>
	</view>

	<!-- 自定义底部导航（当前页面是首页，active 设为 home） -->
	<CustomTabbar active="home" />
</template>

<script setup>
	import {
		ref,
		reactive,
		watch
	} from 'vue';
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'
	import CustomTabbar from '@/components/CustomTabbar.vue'
	import CustomNavbar from '@/components/CustomNavbar.vue'
	import { getLocation } from '@/utils/location.js'
	
	// 从存储中获取位置信息
	const getLocationFromStorage = () => {
		return getLocation()
	}

	// 地址转经纬度（地理编码）
	const geocodeAddress = (address) => {
		return new Promise((resolve, reject) => {
			// 使用腾讯地图 API
			// 注意：
			// 1. 需要将 key 替换为你的实际 key，或者使用后端接口
			// 2. 微信小程序需要在后台配置 request 合法域名：apis.map.qq.com
			// 3. 如果遇到跨域问题，建议使用后端接口作为代理
			// 腾讯地图 API Key（请替换为你的实际 key）
			// 注意：如果更换了 key，需要清除小程序缓存并重新编译
			const key = 'EJABZ-ZBULT-UFMXD-VT6JM-I37RS-OZFVN'; // 从 manifest.json 获取
			const encodedAddress = encodeURIComponent(address);

			// 调试信息：打印使用的 key（仅用于调试，生产环境可删除）
			console.log('当前使用的 API Key:', key);
			console.log('搜索地址:', address);

			// 方法1: 尝试使用搜索API（不带boundary参数，适合城市名、省份等搜索）
			const searchUrl =
				`https://apis.map.qq.com/ws/place/v1/search?keyword=${encodedAddress}&key=${key}&page_size=1&page_index=1`;
			console.log('搜索API请求URL:', searchUrl.replace(key, 'KEY_HIDDEN')); // 隐藏 key 显示

			uni.request({
				url: searchUrl,
				method: 'GET',
				success: (searchRes) => {
					console.log('搜索API结果：', searchRes);
					if (searchRes.statusCode === 200 && searchRes.data) {
						// 检查API key是否达到上限
						if (searchRes.data.status === 121) {
							console.error('API调用量已达上限！');
							console.error('使用的Key:', key);
							console.error('错误详情:', searchRes.data);
							reject(new Error('API调用量已达上限\n\n当前Key: ' + key.substring(0, 10) +
								'...\n\n解决方案：\n1. 等待明天重置\n2. 在腾讯位置服务控制台检查Key配额\n3. 更换新的API Key'
							));
							return;
						}
						if (searchRes.data.status === 0 && searchRes.data.data && searchRes.data
							.data.length > 0) {
							const firstResult = searchRes.data.data[0];
							if (firstResult.location) {
								resolve({
									latitude: firstResult.location.lat,
									longitude: firstResult.location.lng
								});
								return;
							}
						}
					}

					// 方法2: 如果搜索API失败，尝试使用地理编码API（适合详细地址）
					console.log('搜索API失败，尝试地理编码API');
					const geocodeUrl =
						`https://apis.map.qq.com/ws/geocoder/v1/?address=${encodedAddress}&key=${key}&region=中国`;
					console.log('地理编码API请求URL:', geocodeUrl.replace(key,
						'KEY_HIDDEN')); // 隐藏 key 显示

					uni.request({
						url: geocodeUrl,
						method: 'GET',
						success: (res) => {
							console.log('地理编码API结果：', res);
							if (res.statusCode === 200 && res.data) {
								// 检查API key是否达到上限
								if (res.data.status === 121) {
									console.error('地理编码API调用量已达上限！');
									console.error('使用的Key:', key);
									console.error('错误详情:', res.data);
									reject(new Error('API调用量已达上限\n\n当前Key: ' + key
										.substring(0, 10) +
										'...\n\n解决方案：\n1. 等待明天重置\n2. 在腾讯位置服务控制台检查Key配额\n3. 更换新的API Key'
									));
									return;
								}
								if (res.data.status === 0 && res.data.result && res
									.data.result.location) {
									const location = res.data.result.location;
									resolve({
										latitude: location.lat,
										longitude: location.lng
									});
									return;
								}
							}

							// 所有方法都失败了
							console.error('所有API方法都失败');
							console.error('搜索API返回：', searchRes.data);
							console.error('地理编码返回：', res.data);

							// 根据错误类型返回不同的错误信息
							let errorMsg = '未找到位置';
							if (res.data && res.data.status === 121) {
								errorMsg = 'API调用量已达上限，请明天再试或更换API key';
							} else if (searchRes.data && searchRes.data.status ===
								121) {
								errorMsg = 'API调用量已达上限，请明天再试或更换API key';
							} else if (res.data && res.data.message) {
								errorMsg = res.data.message;
							} else if (searchRes.data && searchRes.data.message) {
								errorMsg = searchRes.data.message;
							}
							reject(new Error(errorMsg));
						},
						fail: (geocodeErr) => {
							console.error('地理编码API请求失败：', geocodeErr);
							reject(new Error('网络请求失败，请检查网络连接'));
						}
					});
				},
				fail: (err) => {
					console.error('搜索API请求失败：', err);
					reject(new Error('网络请求失败，请检查网络连接'));
				}
			});
		});
	}

	// 刷新定位
	const refreshLocation = () => {
		// 检查是否有输入地址
		const inputAddress = addressValue.value.trim();

		if (!inputAddress) {
			// 如果没有输入地址，则使用GPS定位
			uni.showLoading({
				title: '定位中...'
			})
			getPositionOnce().then(() => {
				// 更新地图标记点
				updateMarkers();
				uni.hideLoading()
				uni.showToast({
					title: '已更新位置',
					icon: 'success'
				})
			}).catch(() => {
				uni.hideLoading()
				uni.showToast({
					title: '定位失败，请重试',
					icon: 'none'
				})
			})
		} else {
			// 如果有输入地址，进行地理编码
			uni.showLoading({
				title: '搜索中...'
			})
			geocodeAddress(inputAddress).then((location) => {
				// 更新经纬度
				latitude.value = location.latitude;
				longitude.value = location.longitude;
				// 更新地图标记点
				updateMarkers();
				uni.hideLoading()
				uni.showToast({
					title: '定位成功',
					icon: 'success'
				})
			}).catch((err) => {
				uni.hideLoading()
				console.error('定位失败，错误信息：', err);
				let errorMsg = '未找到位置，请检查地址是否正确';
				let showConsoleTip = true;

				if (err && err.message) {
					if (err.message.includes('网络')) {
						errorMsg = '网络请求失败，请检查网络连接或API配置';
					} else if (err.message.includes('上限')) {
						errorMsg = err.message;
						showConsoleTip = false; // API上限提示已经很清楚了，不需要再提示查看控制台
					} else {
						errorMsg = err.message;
					}
				}

				const content = showConsoleTip ?
					errorMsg + '\n\n提示：请查看控制台日志获取详细错误信息' :
					errorMsg;

				uni.showModal({
					title: '提示',
					content: content,
					showCancel: false,
					confirmText: '确定'
				})
			})
		}
	}

	const addressValue = ref('焦作市山阳区人民路32号');

	// 导航栏背景配置
	const background = reactive({
		backgroundImage: 'linear-gradient(135deg, #6a11cb, #2575fc)',
		backgroundSize: 'cover'
	});


	// 经纬度
	const latitude = ref(34.825817)
	const longitude = ref(113.55852)
	//app实时定位
	const getPosition = () => {
		// console.log(99);
		uni.getLocation({
			type: 'wgs84',
			success: function(res) {
				console.log(res)
				console.log('当前位置的经度：', res.longitude)
				console.log('当前位置的纬度：', res.latitude)
				longitude.value = res.longitude;
				latitude.value = res.latitude;
			}
		})
	}
	// 获取位置（返回Promise）
	const getPositionOnce = () => {
		return new Promise((resolve, reject) => {
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					console.log(res)
					console.log('当前位置的经度：', res.longitude)
					console.log('当前位置的纬度：', res.latitude)
					longitude.value = res.longitude;
					latitude.value = res.latitude;
					resolve(res);
				},
				fail: function(err) {
					console.error('定位失败：', err);
					reject(err);
				}
			})
		})
	}
	//获取地址
	const choose = () => {
		// #ifdef H5
		navigator.geolocation.getCurrentPosition(
			position => {
				console.log(position.coords.latitude, position.coords.longitude);
				// 处理获取到的位置信息
				uni.chooseLocation({
					success(resp) {
						console.log(resp);
					}
				})
			},
			error => {
				console.error(error);
				// 处理错误
			}
		);
		// #endif
		// #ifndef H5
		uni.chooseLocation({
			success(resp) {
				console.log(resp);
			},
			fail(err) {
				console.error('选择位置失败：', err);
			}
		})
		// #endif
	}
	// 当页面加载后立马执行
	onLoad(() => {
		// 优先从存储中获取位置信息
		const savedLocation = getLocationFromStorage()
		if (savedLocation) {
			latitude.value = savedLocation.latitude
			longitude.value = savedLocation.longitude
			if (savedLocation.address) {
				addressValue.value = savedLocation.address
			} else if (savedLocation.city) {
				addressValue.value = savedLocation.city
			}
			updateMarkers()
		} else {
			// 如果没有存储的位置，则获取当前位置
			getPosition()
		}
		
		// 监听位置更新事件
		uni.$on('locationUpdated', (locationData) => {
			if (locationData) {
				latitude.value = locationData.latitude
				longitude.value = locationData.longitude
				if (locationData.address) {
					addressValue.value = locationData.address
				} else if (locationData.city) {
					addressValue.value = locationData.city
				}
				updateMarkers()
			}
		})
	})
	onUnload(() => {
		try {
			// #ifdef H5
			if (h5WatchId !== null && navigator.geolocation?.clearWatch) {
				navigator.geolocation.clearWatch(h5WatchId)
				h5WatchId = null
			}
			// #endif
			// #ifndef H5
			uni.offLocationChange && uni.offLocationChange()
			uni.stopLocationUpdate && uni.stopLocationUpdate()
			// #endif
			// 移除事件监听
			uni.$off('locationUpdated')
		} catch (e) {}
	})

	// 功能导航数据（新增 path 字段，绑定目标页面路径）
	const navList = ref([{
			icon: '/static/index/车辆维修1-01@2x.png',
			text: '车辆维修',
			path: '/pages/repair/repair', // 车辆维修页面路径
			isTabbar: false // 是否为 Tabbar 页面（false 则用 navigateTo，true 用 switchTab）
		},
		{
			icon: '/static/index/保养@2x.png',
			text: '汽车保养',
			path: '/pages/car-maintenance/car-maintenance',
			isTabbar: false
		},
		{
			icon: '/static/index/洗车@2x.png',
			text: '专业洗车',
			path: '/pages/wash/wash',
			isTabbar: false
		},
		{
			icon: '/static/index/加油枪 (1)@2x.png',
			text: '就近加油',
			path: '/pages/index/GasStation/GasStation',
			isTabbar: false
		},
	]);

	// 团购数据
	const groupList = ref([{
			id: 1,
			image: '/static/10011.jpg',
			title: '汽车惠民活动走进焦作市山阳区'
		},
		{
			id: 2,
			image: '/static/10015.jpg',
			title: '冬季车辆保养特惠套餐限时抢购'
		},
		{
			id: 3,
			image: '/static/10040.jpg',
			title: '洗车+打蜡组合套餐立减50元'
		},
		{
			id: 4,
			image: '/static/10043.jpg',
			title: '92号汽油充值1000送100元'
		},
	]);

	// 地图标记点
	const markers = ref([{
		id: 1,
		latitude: latitude.value,
		longitude: longitude.value,
		iconPath: '/static/10090.ico',
		width: 28,
		height: 28
	}])

	// 更新地图标记点
	const updateMarkers = () => {
		markers.value = [{
			id: 1,
			latitude: latitude.value,
			longitude: longitude.value,
			iconPath: '/static/10090.ico',
			width: 28,
			height: 28
		}];
	}

	// 监听经纬度变化，自动更新标记点
	watch([latitude, longitude], () => {
		updateMarkers();
	})

	// 导航点击事件（核心优化：接收 item 对象，根据 path 跳转）
	const handleNavClick = (item) => {
		// 校验路径是否存在
		if (!item.path) {
			uni.showToast({
				title: '该功能暂未开放',
				icon: 'none'
			});
			return;
		}

		// 传递当前位置参数（示例：地址、经纬度）
		const params = {
			address: encodeURIComponent(addressValue.value), // 地址（编码特殊字符）
			latitude: latitude.value,
			longitude: longitude.value
		};
		// 拼接参数（格式：path?key1=value1&key2=value2）
		const url = `${item.path}?address=${params.address}&latitude=${params.latitude}&longitude=${params.longitude}`;

		// 根据是否为 Tabbar 页面，选择跳转方式
		if (item.isTabbar) {
			uni.switchTab({
				url: item.path, // Tabbar 页面不支持带参数，若需传参可改用全局状态
				success: () => console.log('跳转到 Tabbar 页面成功'),
				fail: (err) => {
					console.error('Tabbar 页面跳转失败：', err);
					uni.showToast({
						title: '跳转失败，请检查页面配置',
						icon: 'none'
					});
				}
			});
		} else {
			uni.navigateTo({
				url: url, // 非 Tabbar 页面带参数跳转
				success: () => console.log(`跳转到 ${item.text} 页面成功`),
				fail: (err) => {
					console.error('非 Tabbar 页面跳转失败：', err);
					uni.showToast({
						title: '页面不存在或路径错误',
						icon: 'none'
					});
				}
			});
		}
	};

	// 查看全部加油站
	const viewAllStations = () => {
		uni.navigateTo({
			url: `/pages/index/GasStation/GasStation?address=${encodeURIComponent(addressValue.value)}&latitude=${latitude.value}&longitude=${longitude.value}`,
			fail: () => {
				uni.showToast({
					title: '页面未找到',
					icon: 'none'
				});
			}
		});
	};

	// 查看更多团购
	const viewMoreGroups = () => {
		uni.navigateTo({
			url: '/pages/index/DiscountList/DiscountList',
			fail: () => {
				uni.showToast({
					title: '页面未找到',
					icon: 'none'
				});
			}
		});
	};

	// 跳转到消息页面
	const goToMessage = () => {
		uni.navigateTo({
			url: '/pages/index/Message/Message',
			fail: () => {
				uni.showToast({
					title: '页面未找到',
					icon: 'none'
				});
			}
		});
	};

	// 跳转到优惠详情页面
	const goToDiscountDetail = (item) => {
		uni.navigateTo({
			url: `/pages/index/DiscountPage/DiscountPage?id=${item.id}`,
			fail: () => {
				uni.showToast({
					title: '页面未找到',
					icon: 'none'
				});
			}
		});
	};
</script>

<style scoped>
	page {
		background-color: #f5f7fa;
		height: 100%;
	}

	/* 导航栏内容样式 */
	.navbar-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		/* position: relative; */
		margin: 0 -24rpx;
		padding: 0 24rpx;
		/* padding-bottom: 30rpx; */
	}

	.nav-left {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 88rpx;
	}

	.back-icon {
		color: #fff;
		font-size: 56rpx;
		font-weight: 300;
		line-height: 88rpx;
		transform: scaleY(1.3);
		cursor: pointer;
	}

	.nav-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 88rpx;
	}

	/* 导航栏样式 */
	::v-deep .custom-navbar {
		height: 320rpx !important;
		background-image: linear-gradient(135deg, #6a11cb, #2575fc) !important;
		position: relative;
		border-radius: 0 0 30rpx 30rpx;
		z-index: 0;
	}

	::v-deep .u-navbar__title {
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
	}

	.right-icons {
		display: flex;
		align-items: center;
	}

	.icon-item {
		margin-left: 30rpx;
	}

	/* 容器样式 */
	.container {
		position: absolute;
		top: 190rpx;
		left: 0;
		right: 0;
		bottom: 100rpx;
		padding-bottom: 20rpx;
		/* overflow-y: auto; */
		z-index: 1;
	}

	/* 地址栏样式 */
	.address-bar {
		margin-top: 20rpx;
		padding: 20rpx 30rpx;
		margin-bottom: 30rpx;
	}

	.address-inner {
		background-color: #fff;
		border-radius: 30rpx;
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.06);
	}

	.search-input-wrapper {
		display: flex;
		align-items: center;
		height: 90rpx;
		padding: 0 20rpx;
	}

	.input-prefix {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
	}

	.input-suffix {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
	}

	.search-input {
		flex: 1;
		height: 90rpx;
		font-size: 28rpx;
	}

	.refresh-wrap {
		display: flex;
		align-items: center;
		color: #2575fc;
	}

	.refresh-text {
		font-size: 26rpx;
		margin-left: 5rpx;
		color: #2575fc;
	}

	.input-icon {
		width: 32rpx;
		height: 32rpx;
	}

	::v-deep .u-input {
		background-color: transparent;
		border-radius: 0;
	}



	/* 功能导航栏样式 */
	.nav-list {
		display: flex;
		justify-content: space-around;
		padding: 34rpx 0 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 20rpx 30rpx;
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.06);
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
	}

	.nav-icon-wrap {
		width: 110rpx;
		height: 110rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.06);
		margin-bottom: 12rpx;
	}

	.nav-color-0 {
		background: linear-gradient(180deg, #7ab8ff, #4d87ff);
	}

	.nav-color-1 {
		background: linear-gradient(180deg, #ffc36b, #ff8f4d);
	}

	.nav-color-2 {
		background: linear-gradient(180deg, #8ee08a, #44c26a);
	}

	.nav-color-3 {
		background: linear-gradient(180deg, #9cc7ff, #6aa8ff);
	}

	.nav-icon {
		width: 64rpx;
		height: 64rpx;
	}

	.nav-text {
		font-size: 28rpx;
		color: #333;
	}



	/* 板块通用头部样式 */
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
	}

	.section-text-group {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.section-desc {
		font-size: 24rpx;
		color: #999;
		margin-top: 5rpx;
	}

	.section-more {
		font-size: 28rpx;
		color: #2f80ed;
	}

	/* 附近加油站模块样式 */
	.station-section {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 20rpx 30rpx;
		overflow: hidden;
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.06);
		height: 480rpx;
	}


	/* 优惠团购模块样式 */
	.group-section {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 20rpx 30rpx;
		overflow: hidden;
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.06);
		height: 880rpx;


	}

	.group-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 20rpx 30rpx;
	}

	.group-item {
		width: 48%;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.group-image {
		width: 100%;
		height: 200rpx;
	}

	.group-title {
		display: block;
		padding: 20rpx;
		font-size: 24rpx;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 地图模块 */
	.dtmk {
		background-color: white;
		position: relative;
		cursor: pointer;
	}

	.dt {
		margin: 0 auto;
		width: 670rpx;
		pointer-events: none;
	}
</style>